<template>
	<view style="padding: 30rpx;">
		<view class="apply-title">报名信息</view>
		<view class="input-box">
			<view class="title">姓名<text style="color: red;">(必填)</text> </view>
			<input class="input" type="text" placeholder="请输入姓名" v-model="formData.name" />
		</view>
		<view class="input-box">
			<view class="title">手机号码 <text style="color: red;">(必填)</text> </view>
			<input class="input" type="number" placeholder="请输入手机号码" maxlength="11" v-model="formData.mobile" />
		</view>
		<view class="textarea">
			<view class="textarea-title">
				<text class="apply-title">附加信息</text>
				<text class="apply-title" style="color: #999999;">（非必填）</text>
			</view>
			<textarea class="content" name="" id="" cols="30" rows="10" maxlength="50" placeholder="请输入附加信息" v-model="formData.apply_text"></textarea>
		</view>
		<view class="pay-type">
			<view class="apply-title">选择支付账户</view>
			<view class="" style="display: flex;">
				<view class="apply-value">10伴豆=10星光=1元</view>
				<view class="" >
					<view class="xg-tips" style="font-size:24rpx;color: #FE3052;text-align: center;margin-left: 30rpx;" @click="toagree('城伴星光服务协议')">
										《城伴星光服务协议》
									</view>
				</view>
			</view>
			
		</view>
		<view class="input-box">
			<view class="left-text">
				<image src="/pages/activeDetail/static/images/money.png" mode="widthFix"></image>
				<view class="balance-item">
					<text class="common-account">通用账户(优先)</text>
					<text class="balance">{{totalmoney}}星光</text>
					<text class="not-balance" v-if="totalmoney/10<payMoney">余额不足</text>
				</view>
			</view>
			<view class="right-radio" @click="changeRadio('1')">
				<image v-if="formData.type=='1'" src="/pages/activeDetail/static/images/select.png" mode="widthFix">
				</image>
				<image v-else src="/pages/activeDetail/static/images/no_select.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="input-box" v-if="payMoney>0">
			<view class="left-text">
				<image src="/pages/activeDetail/static/images/wechat.png" mode="widthFix"></image>
				<view class="balance-item">
					<text class="common-account">微信支付</text>
				</view>
			</view>
			<view class="right-radio" @click="changeRadio('2')">
				<image v-if="formData.type=='2'" src="/pages/activeDetail/static/images/select.png" mode="widthFix">
				</image>
				<image v-else src="/pages/activeDetail/static/images/no_select.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="active-tips">
		<!-- 	* 活动开始前48小时不可取消，若活动需要另带朋友可重复报名，如有需求可联系活动主理人！ -->
			<uv-parse :content="content"></uv-parse>
			<uv-text color="#fe3052" size="12" align="center" bold :text="`本次活动支付方式：${payType}`"></uv-text>
		</view>
	</view>
	<view class="fixed">
		<view class="left-pay">
			<view class="title-pay">报名需付
			</view>
			<view class="total">￥{{payMoney}}</view>
		</view>
		<view v-if="formData.type == 1">
			<view class="pay-btn" v-if="totalmoney/10<payMoney">
				立即支付
			</view>
			<view class="y-pay-btn" @click="payment" v-else>
				立即支付
			</view>
		</view>
		<view class="y-pay-btn" v-if="formData.type == 2" @click="payment">
			立即支付
		</view>

	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue';
	import { throttle } from '@/utils/utils.js'
	import { useUserStore } from '@/store/modules/user.js'
	import { useActiveStore } from '@/store/modules/active.js'
	const userstore = useUserStore()
	const useractive = useActiveStore()
	const totalmoney = ref(0)
	const payMoney = ref(0)
	const payType = ref('')
	const formData = reactive({
		user_activity_id: '',
		type: '1',
		name: '',
		mobile: '',
		apply_text: ''
	})
	const content=ref('')
	onLoad(async(option) => {
		formData.user_activity_id = option.activeId
		payMoney.value = option.payMoney
		payType.value = option.payType
		totalMoney()
		let res = await userstore.getConFig({ type: 'activityApplyTips' })
		content.value = res.data.content
	})
	const changeRadio = (type) => {
		formData.type = type
	}
	const toagree = (text) => {
			uni.navigateTo({
				url: '/pages/login/agreement/index?title=' + text
			})
		}
	// 获取星光币
	const totalMoney = async () => {
		let res = await userstore.getMoneyAmount()
		totalmoney.value = res
	}
	const payment = throttle(() => {
		
		uni.login({
			provider: 'weixin', //使用微信登录
			success: async (loginRes) => {
				let result = await userstore.bindOpenid({ code: loginRes.code })
					console.log(2222,result)
				if (result.code == 200) {
					let res = await useractive.applyActive(formData)
				
					if (res.code == 200) {
						if (formData.type == 1) {
							// 星光支付
							uni.navigateTo({
								url: '/pages/activeDetail/success/index'
							})
						} else {
							// 微信支付
							let ress = res.data.config
							console.log(2222,ress.appId)
							uni.requestPayment({
								"provider": "wxpay",
								"appId": res.data.config.appId,
								"nonceStr": res.data.config.nonceStr,
								"package": res.data.config.package,
								"timeStamp": res.data.config.timeStamp,
								"signType": res.data.config.signType,
								"paySign": res.data.config.paySign,

								success: (res1) => {
									uni.navigateTo({
										url: '/pages/activeDetail/success/index'
									})
								},
								fail: (e) => {
									console.log(e)
									// uni.$uv.toast('支付失败',e)
								}
							})
						}
					}
				}
			}
		});
	}, 200)
</script>

<style lang="scss" scoped>
	.apply-title {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.input-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-top: 30rpx;
		width: 690rpx;
		height: 112rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.title {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}

		.input {
			text-align: right;
			font-size: 28rpx;
		}

		.left-text {
			display: flex;
			align-items: center;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			.balance-item {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;

				.common-account {
					padding: 0 20rpx;
				}

				.balance {
					color: #FE3052;
				}

				.not-balance {
					padding-left: 20rpx;
					color: #FE3052;
				}
			}

		}

		.right-radio {
			width: 36rpx;
			height: 36rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.active-tips {
		padding-bottom: 150rpx;
		margin-top: 30rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FE3052;
	}

	.textarea {
		margin: 30rpx 0 60rpx 0;
		padding: 30rpx;
		width: 690rpx;
		height: 310rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.content {
			font-size: 28rpx;
			padding-top: 30rpx;
		}
	}

	.fixed {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 136rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 12rpx 2rpx rgba(0, 0, 0, 0.03);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.left-pay {
			.title-pay {
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
			}

			.total {
				font-weight: bold;
				font-size: 40rpx;
				color: #FE3052;
			}
		}

		.pay-btn {
			width: 430rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #EBEBEB;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #999999;
			text-align: center;
		}

		.y-pay-btn {
			width: 430rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #FE3052;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>